<template>
  <div class="favorite-container">
    <!-- 头部：标题 + 批量删除 -->
    <div class="page-header">
      <h2 class="page-title">我的收藏</h2>
      <el-button
          :disabled="selectedIds.length === 0"
          icon="el-icon-delete"
          size="default"
          type="danger"
          @click="handleBatchDelete"
      >
        批量删除
      </el-button>
    </div>

    <!-- 收藏列表表格 -->
    <el-table
        :data="favoriteList"
        :header-cell-style="{ background: '#f5f7fa', color: '#333', fontWeight: '500' }"
        :loading="tableLoading"
        border
        row-key="ufpId"
        stripe
        style="width: 100%; margin-top: 16px"
        @selection-change="handleSelectionChange"
    >
      <!-- 多选框列 -->
      <el-table-column align="center" type="selection" width="55"/>

      <!-- 商品图片列：匹配 images 集合 -->
      <el-table-column align="center" label="商品图片" width="120">
        <template #default="scope">
          <el-image
              :preview-src-list="[getMainImage(scope.row)]"
              :src="getMainImage(scope.row)"
              class="product-img"
              fit="cover"
              lazy
              @error="(e) => e.target.src = defaultImg"
          >
            <template #error>
              <div class="img-placeholder">无图片</div>
            </template>
          </el-image>
        </template>
      </el-table-column>

      <!-- 商品名称列：匹配 product 嵌套对象 -->
      <el-table-column align="center" label="商品名称" min-width="280">
        <template #default="scope">
          <div
              :title="scope.row.product?.productName || '未知商品'"
              class="product-name"
              @click="handleGoDetail(scope.row)"
          >
            {{ scope.row.product?.productName || '未知商品' }}
          </div>
        </template>
      </el-table-column>

      <!-- 商品价格列：匹配 product 嵌套对象 -->
      <el-table-column align="center" label="商品价格" width="120">
        <template #default="scope">
          <span class="product-price">
            ¥{{ formatPrice(scope.row.product?.productPrice) }}
          </span>
        </template>
      </el-table-column>

      <!-- 收藏时间列：匹配 ufp_created_at 别名字段 -->
      <el-table-column align="center" label="收藏时间" width="160">
        <template #default="scope">
          <span>{{ formatDate(scope.row.ufpCreatedAt) || '未知时间' }}</span>
        </template>
      </el-table-column>

      <!-- 操作列：基于 ufp_product_id 实现功能 -->
      <el-table-column align="center" label="操作" width="180">
        <template #default="scope">
          <el-button
              :disabled="!scope.row.ufpProductId"
              icon="el-icon-open"
              size="small"
              style="margin-right: 8px"
              type="primary"
              @click="handleGoDetail(scope.row)"
          >
            查看详情
          </el-button>
          <el-button
              :disabled="!scope.row.ufpProductId"
              icon="el-icon-delete"
              size="small"
              type="danger"
              @click="handleSingleDelete(scope.row)"
          >
            取消收藏
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 空状态 -->
    <div v-if="!tableLoading && favoriteList.length === 0" class="empty-state">
      <el-empty
          :image-size="120"
          description="暂无收藏商品，去逛逛吧～"
      >
        <el-button type="primary" @click="handleGoGoodList">
          浏览商品
        </el-button>
      </el-empty>
    </div>

    <!-- 分页组件 -->
    <div v-if="!tableLoading && total > 0" class="pagination">
      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[5, 10, 15, 20]"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus'
import http from '@/request/Http.js' // 引入项目封装的请求工具

const router = useRouter()

// 1. 状态管理（匹配后端返回字段）
const tableLoading = ref(false) // 表格加载状态
const favoriteList = ref([]) // 收藏列表（后端返回的 ProductFavoriteVo 数组）
const selectedIds = ref([]) // 批量删除选中的 ufp_product_id 集合
const total = ref(0) // 总条数
const currentPage = ref(1) // 当前页
const pageSize = ref(10) // 每页条数
const defaultImg = ref('https://tva1.sinaimg.cn/crop.0.0.1080.1080.180/006y8mN6ly1g6e2tdgve1j30u00u0n0j.jpg') // 默认图片

// 2. 分页事件
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1 // 页大小变更时重置为第一页
  getFavoriteList()
}
const handleCurrentChange = (val) => {
  currentPage.value = val
  getFavoriteList()
}

// 3. 多选框选中事件（收集有效 ufp_product_id）
const handleSelectionChange = (selection) => {
  selectedIds.value = selection
      .map(item => item.ufpProductId) // 取后端 ufp_product_id 字段
      .filter(id => id) // 过滤空值
}

// 4. 核心工具函数（匹配后端映射）
/**
 * 获取商品主图：从 images 集合取 sort 最小的第一张图
 * @param {Object} row - 表格行数据（ProductFavoriteVo）
 * @returns {String} 主图 URL
 */
const getMainImage = (row) => {
  // 后端 images 集合字段：pi_image_url（图片地址）、pi_sort（排序）
  if (!row.images || !Array.isArray(row.images) || row.images.length === 0) {
    return defaultImg.value
  }
  // 按 pi_sort 升序，取第一张主图
  const sortedImgs = [...row.images].sort((a, b) => (a.piSort || 0) - (b.piSort || 0))
  return sortedImgs[0].piImageUrl || defaultImg.value
}

/**
 * 格式化价格：处理后端 product_price 字段（避免非数字）
 * @param {Number|String} price - 后端返回的商品价格
 * @returns {String} 保留 2 位小数的价格
 */
const formatPrice = (price) => {
  if (price === undefined || price === null || isNaN(Number(price))) {
    return '0.00'
  }
  return Number(price).toFixed(2)
}

/**
 * 格式化收藏时间：处理后端 ufp_created_at 字段（LocalDate 类型）
 * @param {String|Object} dateVal - 后端返回的收藏时间（如 "2025-10-10"）
 * @returns {String} 格式化后的时间（如 "2025年10月10日"）
 */
const formatDate = (dateVal) => {
  if (!dateVal) return ''
  try {
    const date = typeof dateVal === 'string' ? new Date(dateVal) : new Date(dateVal.toString())
    if (isNaN(date.getTime())) return '' // 避免无效日期
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0') // 补零为两位数
    const day = String(date.getDate()).padStart(2, '0')
    return `${year}年${month}月${day}日`
  } catch (error) {
    console.error('时间格式化失败:', error)
    return ''
  }
}

// 5. 核心业务逻辑
/**
 * 获取收藏列表：调用后端接口，匹配参数与返回结构
 */
const getFavoriteList = async () => {
  tableLoading.value = true
  try {
    // 验证登录状态：从 sessionStorage 获取 token
    const token = sessionStorage.getItem('token')
    if (!token) {
      ElMessage.warning('请先登录')
      await router.push('/login')
      return
    }

    // 调用后端接口：传递分页参数，请求头带 token
    const res = await http.get('/FollowAndFavorite/getUserFavoriteProducts', {
      params: {
        currentPage: currentPage.value,
        pageSize: pageSize.value
      },
      headers: {token} // 后端需从 token 解析用户 ID（UserContextHolder）
    })

    // 处理后端返回：匹配 DataVo 结构（code/msg/data）
    const {code, msg, data} = res
    if (code !== 200) {
      ElMessage.error(msg || '获取收藏列表失败')
      return
    }

    // 赋值：后端 data 包含 records（列表）和 total（总条数）
    favoriteList.value = data.records || []
    total.value = data.total || 0

    // 调试：打印第一条数据结构，确认字段匹配（可选）
    if (favoriteList.value.length > 0) {
      console.log('后端返回数据结构:', favoriteList.value[0])
      console.log('收藏表主键（ufpId）:', favoriteList.value[0].ufpId)
      console.log('商品ID（ufpProductId）:', favoriteList.value[0].ufpProductId)
      console.log('商品信息（product）:', favoriteList.value[0].product)
      console.log('商品图片（images）:', favoriteList.value[0].images)
    }
  } catch (error) {
    console.error('获取收藏列表异常:', error)
    ElMessage.error('网络异常，请稍后重试')
  } finally {
    tableLoading.value = false // 关闭加载状态
  }
}

/**
 * 单个取消收藏：传递 ufp_product_id 到后端
 * @param {Object} row - 表格行数据
 */
const handleSingleDelete = async (row) => {
  const productId = row.ufpProductId // 取后端 ufp_product_id 字段
  if (!productId) {
    ElMessage.warning('无效的商品ID')
    return
  }

  try {
    // 弹窗确认
    await ElMessageBox.confirm(
        '确定要取消收藏该商品吗？',
        '提示',
        {type: 'warning', confirmButtonText: '确定', cancelButtonText: '取消'}
    )

    const token = sessionStorage.getItem('token')
    const res = await http.post(
        '/FollowAndFavorite/deleteFavorite',
        [productId], // 后端接收 ArrayList<Long> ids（商品ID集合）
        {headers: {token}}
    )

    if (res.code === 200) {
      ElMessage.success('取消收藏成功')
      getFavoriteList() // 重新加载列表
    } else {
      ElMessage.error(res.msg || '取消收藏失败')
    }
  } catch (error) {
    // 忽略用户取消弹窗的异常
    if (error !== 'cancel') {
      console.error('单个删除异常:', error)
      ElMessage.error('网络异常，请稍后重试')
    }
  }
}

/**
 * 批量取消收藏：传递选中的 ufp_product_id 集合
 */
const handleBatchDelete = async () => {
  if (selectedIds.value.length === 0) {
    ElMessage.warning('请先选中要删除的商品')
    return
  }

  try {
    await ElMessageBox.confirm(
        `确定要取消收藏选中的 ${selectedIds.value.length} 件商品吗？`,
        '批量取消收藏',
        {type: 'warning', confirmButtonText: '确定', cancelButtonText: '取消'}
    )

    const token = sessionStorage.getItem('token')
    const res = await http.post(
        '/FollowAndFavorite/deleteFavorite',
        selectedIds.value, // 传递选中的商品ID集合
        {headers: {token}}
    )

    if (res.code === 200) {
      ElMessage.success('批量取消收藏成功')
      selectedIds.value = [] // 清空选中状态
      getFavoriteList() // 重新加载列表
    } else {
      ElMessage.error(res.msg || '批量取消收藏失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除异常:', error)
      ElMessage.error('网络异常，请稍后重试')
    }
  }
}

/**
 * 跳转商品详情页：基于 ufp_product_id
 * @param {Object} row - 表格行数据
 */
const handleGoDetail = (row) => {
  const productId = row.ufpProductId
  if (productId) {
    router.push(`/userHome/showGood/${productId}`) // 匹配后端商品详情页路径
  } else {
    ElMessage.warning('商品不存在')
  }
}

/**
 * 跳转商品列表页
 */
const handleGoGoodList = () => {
  router.push('/userHome/showGoodList')
}

// 6. 页面初始化：加载收藏列表
onMounted(() => {
  getFavoriteList()
})
</script>

<style scoped>
/* 容器样式 */
.favorite-container {
  padding: 20px;
  background-color: #f9fafb;
  min-height: calc(100vh - 60px); /* 占满剩余视口高度 */
}

/* 头部样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.page-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

/* 商品图片样式 */
.product-img {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.product-img:hover {
  opacity: 0.9;
}

/* 图片占位符样式 */
.img-placeholder {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  color: #999;
  font-size: 12px;
  border-radius: 4px;
}

/* 商品名称样式（超出省略） */
.product-name {
  color: #333;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: color 0.2s;
}
.product-name:hover {
  color: #409eff; /* hover 变色提示可点击 */
}

/* 商品价格样式（红色强调） */
.product-price {
  color: #f56c6c;
  font-weight: 500;
  font-size: 14px;
}

/* 空状态样式 */
.empty-state {
  padding: 80px 0;
  text-align: center;
  background-color: #fff;
  border-radius: 8px;
  margin-top: 16px;
}

/* 分页样式（居中） */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* 响应式适配（移动端） */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .product-img, .img-placeholder {
    width: 60px;
    height: 60px;
  }

  /* 移动端隐藏收藏时间列，避免表格拥挤 */
  .el-table-column[label="收藏时间"] {
    display: none !important;
  }
}
</style>